<%--
  Created by IntelliJ IDEA.
  User: lyy
  Date: 2022/9/23
  Time: 18:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<% String path = request.getContextPath();%>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<!doctype html>
<html lang="en" class="pxp-root">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="shortcut icon" href="/static/web/images/favicon.png" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com/">
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600;700&display=swap" rel="stylesheet">
    <link href="/static/web/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/web/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/web/css/owl.carousel.min.css">
    <link rel="stylesheet" href="/static/web/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="/static/web/css/animate.css">
    <link rel="stylesheet" href="/static/web/css/style.css">

    <title>在招职位</title>
</head>
<body>
<div class="pxp-preloader"><span>Loading...</span></div>

<jsp:include page="/web/personal/inc/indexHead"></jsp:include>

<section class="pxp-page-header-simple" style="background-color: var(--pxpMainColorLight);">
    <div class="pxp-container">
        <h1 class="text-center">搜 索 心 仪 职 位</h1>
        <div class="pxp-hero-subtitle pxp-text-light text-center">通过 <strong> ${positionCount} </strong> 个职位搜索您的职业机会</div>
    </div>
</section>

<section class="mt-100">
    <div class="pxp-container">
        <div class="row">
            <div class="col-lg-5 col-xl-4 col-xxl-3">
                <div class="pxp-jobs-list-side-filter">
                    <div class="mt-4 mt-lg-0 d-lg-block pxp-list-side-filter-panel">
                        <h3>按关键字搜索</h3>
                        <div class="mt-2 mt-lg-3">
                            <div class="input-group">
                                <span class="input-group-text"><span class="fa fa-search"></span></span>
                                <input type="text" class="form-control" id="position-name" placeholder="公司或职位">
                            </div>
                        </div>

                        <h3 class="mt-3 mt-lg-4">工作地点</h3>
                        <div class="mt-2 mt-lg-3">
                            <div class="input-group">
                                <span class="input-group-text"><span class="fa fa-globe"></span></span>
                                <input type="text" class="form-control" id="city-name" placeholder="输入位置">
                            </div>
                        </div>

                        <h3 class="mt-3 mt-lg-4">招聘类型</h3>
                        <div class="mt-2 mt-lg-3">
                            <div class="input-group">
                                <span class="input-group-text"><span class="fa fa-folder-o"></span></span>
                                <select class="form-select" id="position-type">
                                    <option selected="" value="0">所有类别</option>
                                    <c:forEach items="${requestScope.positionTypes}" var="positionType">
                                        <option value="${positionType.id}">${positionType.typeName}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>

                        <h3 class="mt-3 mt-lg-4">工作经验</h3>
                        <div class="list-group mt-2 mt-lg-3">
                            <c:forEach items="${requestScope.workExperienceTypes}" var="workExperienceType">
                                <label class="list-group-item d-flex justify-content-between align-items-center mt-2 mt-lg-3">
                                            <span class="d-flex">
                                                <input class="form-check-input me-2 work-experience-type" type="checkbox" value="${workExperienceType.id}">
                                                ${workExperienceType.workExperienceInfo}
                                            </span>
                                    <span class="badge rounded-pill">${workExperienceType.positionCount}</span>
                                </label>
                            </c:forEach>
                        </div>

                        <h3 class="mt-3 mt-lg-4">学历要求</h3>
                        <div class="list-group mt-2 mt-lg-3">
                            <c:forEach items="${requestScope.educations}" var="education">
                                <label class="list-group-item d-flex justify-content-between align-items-center mt-2 mt-lg-3">
                                            <span class="d-flex">
                                                <input class="form-check-input me-2 education" type="checkbox" value="${education.id}">
                                                ${education.educationName}
                                            </span>
                                    <span class="badge rounded-pill">${education.positionCount}</span>
                                </label>
                            </c:forEach>
                        </div>

                        <h3 class="mt-3 mt-lg-4">薪资范围</h3>
                        <div class="list-group mt-2 mt-lg-3">
                            <c:forEach items="${requestScope.salaries}" var="salary">
                                <label class="list-group-item d-flex justify-content-between align-items-center mt-2 mt-lg-3">
                                            <span class="d-flex">
                                                <input class="form-check-input me-2 salary" type="checkbox" value="${salary.id}">
                                                ${salary.salaryInfo}
                                            </span>
                                    <span class="badge rounded-pill">${salary.positionCount}</span>
                                </label>
                            </c:forEach>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-7 col-xl-8 col-xxl-9">
                <div class="pxp-jobs-list-top mt-4 mt-lg-0">
                    <div class="row justify-content-between align-items-center">
                        <div class="col-auto">
                            <h2><span class="pxp-text-light"></span>  <span class="pxp-text-light">为您智能筛选 >></span></h2>
                        </div>
                        <div class="col-auto">
                            <select class="form-select about" id="">
                                <option value="0" selected>最热门</option>
                                <option value="1">最新</option>
                                <option value="2">过去</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="position-list-table">

                </div>

            </div>
        </div>
    </div>
</section>

<jsp:include page="/web/personal/inc/indexFoot"></jsp:include>

<script src="/static/web/js/jquery-3.3.1.min.js"></script>
<script src="/static/web/js/bootstrap.bundle.min.js"></script>
<script src="/static/web/js/owl.carousel.min.js"></script>
<script src="/static/web/js/nav.js"></script>
<script src="/static/web/js/main.js"></script>
</body>

<script>
    $(function (){
        getPositionName();
        getCityName();
        getPositionTypeId();
        initData(1);

        $("#position-name").blur(function (){
            initData(1);
        });

        $("#city-name").blur(function (){
            initData(1);
        });

        $("#position-type").change(function (){
            initData(1);
        });

        $(".work-experience-type").change(function (){
            initData(1);
        });

        $(".education").change(function (){
            initData(1);
        });

        $(".salary").change(function (){
            initData(1);
        });

        $(".about").change(function (){
            initData(1);
        });

        $(".position-list-table").on("click",".changeNum",function(){
            let pageNum = $(this).html();
            initData(pageNum);
            return false;
        });

        $(".position-list-table").on("click",".preNum",function () {
            let pageNum = $(".nowPageNum").val();
            pageNum--;
            initData(pageNum);
            return false;
        });

        $(".position-list-table").on("click",".nextNum",function () {
            let pageNum = $(".nowPageNum").val();
            pageNum++;
            initData(pageNum);
            return false;
        });
    });

    function initData(pageNum){
        let data = {pageNum:pageNum,positionName:null,cityName:null,positionTypeId:null,workExperienceTypeIds:null,educationIds:null,salaryIds:null,about:null}
        let positionName = $("#position-name").val();
        if (positionName!="")
        {
            data.positionName = positionName;
        }

        let cityName = $("#city-name").val();
        if (cityName!="")
        {
            data.cityName = cityName;
        }

        let positionTypeId = $("#position-type").val();
        data.positionTypeId = positionTypeId;

        let workExperienceTypeIds = new Array();
        $(".work-experience-type").each(function () {
            if ($(this).prop("checked")){
                workExperienceTypeIds.push($(this).val());
            }
        });
        if (workExperienceTypeIds.length > 0){
            data.workExperienceTypeIds = workExperienceTypeIds;
        }

        let educationIds = new Array();
        $(".education").each(function () {
            if ($(this).prop("checked")){
                educationIds.push($(this).val());
            }
        });
        if (educationIds.length > 0){
            data.educationIds = educationIds;
        }

        let salaryIds = new Array();
        $(".salary").each(function () {
            if ($(this).prop("checked")){
                salaryIds.push($(this).val());
            }
        });
        if (salaryIds.length > 0){
            data.salaryIds = salaryIds;
        }


        let about = $(".about").val();
        data.about=about;


        $.ajax({
            url:"/web/personal/positionListTable",
            type:"post",
            traditional:true,
            data:data,
            success:function (mes) {
                $(".position-list-table").html(mes);
            }
        });
    }

    function getPositionTypeId() {
        let id = "${param.positionTypeId}";
        if (id!=""){
            $("#position-type").find("option[value='"+id+"']").prop("selected",true);
        }
    }
    
    function getCityName() {
        let city = "${param.cityName}";
        if (city!=""){
            $("#city-name").val(city);
        }
    }

    function getPositionName() {
        let key = "${param.positionName}";
        if (key!=""){
            $("#position-name").val(key);
        }
    }

</script>

</html>

